<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/icon-font.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>
  <div class="navigation">
    <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
      <span class="navigation__icon">&nbsp;</span>
    </label>
    <div class="navigation__background">&nbsp;</div>
    <nav class="navigation__nav">
      <ul class="navigation__list">
        <li class="navigation__item"><a href="#" class="navigation__link"><span>01</span>Natours</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"><span>02</span>Your benifits</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"><span>03</span>Popular tourss</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"><span>04</span>Stories</a></li>
        <li class="navigation__item"><a href="#" class="navigation__link"><span>05</span>Book now</a></li>
      </ul>
    </nav>
  </div>
  <header class="header">
    <div class="header__logo-box">
      <img src="img/logo-white.png" alt="" class="header__logo">
    </div>
    <div class="header__text-box">
      <h1 class="heading-primary">
        <span class="heading-primary--main">Outdoors</span>
        <span class="heading-primary--sub">is where life happens</span>
      </h1>
      <a href="#" class="btn btn--white btn-animationed">Discover our tours</a>
    </div>
  </header>
  <!-- <section>
    <div class="row">
      <div class="col-1-of-2">col-1-of-2</div>
      <div class="col-1-of-2">col-1-of-2</div>
    </div>
    <div class="row">
      <div class="col-1-of-3">col-1-of-3</div>
      <div class="col-1-of-3">col-1-of-3</div>
      <div class="col-1-of-3">col-1-of-3</div>
    </div>
    <div class="row">
      <div class="col-1-of-3">col-1-of-3</div>
      <div class="col-2-of-3">col-2-of-3</div>
    </div>
    <div class="row">
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-1-of-4">col-1-of-4</div>
    </div>
    <div class="row">
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-2-of-4">col-1-of-4</div>
    </div>
    <div class="row">
      <div class="col-1-of-4">col-1-of-4</div>
      <div class="col-3-of-4">col-1-of-4</div>
    </div>
  </section> -->
  <main>
    <section class="section-about">
      <div class="u-center-text u-margin-bottom-big">
        <h2 class="heading-secondary">
          Exciting tours for adventurous people
        </h2>
      </div>
      <div class="row">
        <div class="col-1-of-2">
          <h3 class="heading-tertiary u-margin-bottom-small">you're going to fall in love with nature</h3>
          <p class="paragreph">
            Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
            consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
            adipiscing elit.Aperiam, ipsum sapiente aspernature
          </p>

          <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
          <p class="paragreph">
            Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
            adipiscing elit.Aperiam, ipsum sapiente aspernature
          </p>
          <a href="#" class="btn-text">Learn more &rarr;</a>
        </div>
        <div class="col-1-of-2">
          <div class="composition">
            <!-- 300w/1000w代表图片宽度可通过打来图片查看 p61详解-->
            <!-- 20vw ~=171/900  30vw~=171/600 300px代表默认情况下的图片宽度-->
            <!-- src兼容旧版本浏览器 -->
            <img srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
              sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px" alt="Photo 1" src="mg/nat-1-large.jpg"
              class="composition__photo composition__photo--p1">
            <img srcset="img/nat-2.jpg 300w, img/nat-2-large.jpg 1000w"
              sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px" alt="Photo 2" src="mg/nat-2-large.jpg"
              class="composition__photo composition__photo--p2">
            <img srcset="img/nat-3.jpg 300w, img/nat-3-large.jpg 1000w"
              sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px" alt="Photo 3" src="mg/nat-3-large.jpg"
              class="composition__photo composition__photo--p3">
            <!--
              <img src="img/nat-1-large.jpg" alt="Photo 1" class="composition__photo composition__photo--p1">
              <img src="img/nat-2-large.jpg" alt="Photo 2" class="composition__photo composition__photo--p2">
              <img src="img/nat-3-large.jpg" alt="Photo 3" class="composition__photo composition__photo--p3">
            -->
          </div>
        </div>
      </div>
    </section>
    <section class="section-features">
      <div class="row">
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-world"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">Explore world</h3>
            <p class="feature-box__text">
              Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
            </p>
          </div>
        </div>
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-compass"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">Meet nature</h3>
            <p class="feature-box__text">
              Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
            </p>
          </div>
        </div>
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-map"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">Find your way</h3>
            <p class="feature-box__text">
              Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
            </p>
          </div>
        </div>
        <div class="col-1-of-4">
          <div class="feature-box">
            <i class="feature-box__icon icon-basic-heart"></i>
            <h3 class="heading-tertiary u-margin-bottom-small">Live a healthier life</h3>
            <p class="feature-box__text">
              Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="section-tours" id="section-tours">
      <div class="u-center-text u-margin-bottom-big">
        <h2 class="heading-secondary">
          Most popular tours
        </h2>
      </div>
      <div class="row">
        <div class="col-1-of-3">
          <div class="card">
            <div class="card__side card__side--front">
              <div class="card__picture card__picture--1">
                &nbsp;
              </div>
              <h4 class="card__heading">
                <span class="card__heading-span card__heading-span--1">
                  The sea explorer
                </span>
              </h4>
              <div class="card__details">
                <ul>
                  <li>3 day tours</li>
                  <li>Up to 30 people</li>
                  <li>2 tour guides</li>
                  <li>Step in cosy hotels</li>
                  <li>Difficulty easy</li>
                </ul>
              </div>
            </div>
            <div class="card__side card__side--back card__side--back-1">
              <div class="card__cta">
                <div class="card__price-box">
                  <p class="card__price-only">
                    Only
                  </p>
                  <p class="card__price-value">
                    $297
                  </p>
                </div>
                <a href="#popup" class="btn btn--white">Book now!</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-of-3">
          <div class="card">
            <div class="card__side card__side--front">
              <div class="card__picture card__picture--2">
                &nbsp;
              </div>
              <h4 class="card__heading">
                <span class="card__heading-span card__heading-span--2">
                  The forest hiker
                </span>
              </h4>
              <div class="card__details">
                <ul>
                  <li>5 day tours</li>
                  <li>Up to 52 people</li>
                  <li>5 tour guides</li>
                  <li>Step in cosy hotels</li>
                  <li>Difficulty easy</li>
                </ul>
              </div>
            </div>
            <div class="card__side card__side--back card__side--back-2">
              <div class="card__cta">
                <div class="card__price-box">
                  <p class="card__price-only">
                    Only
                  </p>
                  <p class="card__price-value">
                    $497
                  </p>
                </div>
                <a href="#popup" class="btn btn--white">Book now!</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-of-3">
          <div class="card">
            <div class="card__side card__side--front">
              <div class="card__picture card__picture--3">
                &nbsp;
              </div>
              <h4 class="card__heading">
                <span class="card__heading-span card__heading-span--3">
                  The snow adventurer
                </span>
              </h4>
              <div class="card__details">
                <ul>
                  <li>8 day tours</li>
                  <li>Up to 80 people</li>
                  <li>4 tour guides</li>
                  <li>Step in cosy hotels</li>
                  <li>Difficulty easy</li>
                </ul>
              </div>
            </div>
            <div class="card__side card__side--back card__side--back-3">
              <div class="card__cta">
                <div class="card__price-box">
                  <p class="card__price-only">
                    Only
                  </p>
                  <p class="card__price-value">
                    $897
                  </p>
                </div>
                <a href="#popup" class="btn btn--white">Book now!</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="u-center-text u-margin-top-huge">
        <a href="#" class="btn btn--green">Discover all tours</a>
      </div>
    </section>
    <section class="section-stories">
      <div class="bg-video">
        <video autoplay muted loop class="bg-video__content">
          <source src="img/video.mp4" type="video/mp4">
          <source src="img/video.webm" type="video/webm">
          Your browser is not support!
        </video>
      </div>
      <div class="u-center-text u-margin-bottom-big">
        <h2 class="heading-secondary">
          we make people genuinely happy
        </h2>
      </div>
      <div class="row">
        <div class="story">
          <figure class="story__shape">
            <img src="img/nat-8.jpg" alt="Person on a tour" class="story__img">
            <figcaption class="story__caption">Mary Smith</figcaption>
          </figure>
          <div class="story__text">
            <h3 class="heading-tertiary u-margin-bottom-small">
              I had the best week ever with my family
            </h3>
            <p>
              Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernature
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="story">
          <figure class="story__shape">
            <img src="img/nat-9.jpg" alt="Person on a tour" class="story__img">
            <figcaption class="story__caption">Mary Jack</figcaption>
          </figure>
          <div class="story__text">
            <h3 class="heading-tertiary u-margin-bottom-small">
              I had the best week ever with my family
            </h3>
            <p>
              Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernature
            </p>
          </div>
        </div>
      </div>
      <div class="u-center-text u-margin-top-huge">
        <a href="#" class="btn-text">Read all stories &rarr;</a>
      </div>
    </section>
    <section class="section-book">
      <div class="row">
        <div class="book">
          <div class="book__form">
            <form action="#" class="form">
              <div class="u-margin-bottom-small">
                <h2 class="heading-secondary">
                  Start booking now
                </h2>
              </div>
              <div class="form__group">
                <input type="text" class="form__input" id="name" placeholder="Full Name" required>
                <label for="name" class="form__label">Full Name</label>
              </div>
              <div class="form__group">
                <input type="email" class="form__input" id="email" placeholder="Email address" required>
                <label for="email" class="form__label">Email address</label>
              </div>
              <div class="form__group">
                <div class="form__radio-group">
                  <input type="radio" class="form__radio-input" id="small" name="size">
                  <label for="small" class="form__radio-label">
                    <span class="form__radio-button"></span>
                    Small tour group
                  </label>
                </div>
                <div class="form__radio-group">
                  <input type="radio" class="form__radio-input" id="large" name="size">
                  <label for="large" class="form__radio-label">
                    <span class="form__radio-button"></span>
                    Large tour group
                  </label>
                </div>
              </div>
              <div class="form-group">
                <button class="btn btn--green">Next step &rarr;</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer class="footer">
    <div class="footer__logo-box">

      <picture class="footer__logo">
        <source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x" media="(max-width: 37.5rem)">
        <img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo" src="img/logo-green-2x.png">
      </picture>

    </div>
    <div class="row">
      <div class="col-1-of-2">
        <div class="footer__navigation">
          <ul class="footer__list">
            <li class="footer__item"><a href="#" class="footer__link">Company</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Contact Us</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Careers</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Privacypolicy</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Terms</a></li>
          </ul>
        </div>
      </div>
      <div class="col-1-of-2">
        <p class="footer__copyright">
          Built by <a href="#" class="footer__link">Jonas Schmedtmann</a> for his online course <a href="#"
            class="footer__link">Advanced CSS and Sass</a>. Copyright &copy; by Jonas Schmedtmann. You are 100% allowed
          to use this webpage for both personal and commercial use, but NOT to claim it as your own design. A credit to
          the original author, Jonas Schmedtmann, is of course highly appreciated.
        </p>
      </div>
    </div>
  </footer>
  <div class="popup" id="popup">
    <div class="popup__content">
      <div class="popup__left">
        <img src="img/nat-8.jpg" alt="Tour photo" class="popup__img">
        <img src="img/nat-9.jpg" alt="Tour photo" class="popup__img">
      </div>
      <div class="popup__right">
        <a href="#section-tours" class="popup__close">&times;</a>
        <h2 class="heading-secondary u-margin-bottom-small">
          Start booking now
        </h2>
        <h3 class="heading-tertiary u-margin-bottom-small">
          Important &ndash; Please read these terms before booking!
        </h3>
        <div class="popup__text">
          Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernature Lorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernature Lorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
          elit.Aperiam, ipsum sapiente aspernature
          adipiscing elit.Aperiam, ipsum sapiente aspernature
        </div>
        <a href="#" class="btn btn--green">Book now</a>
      </div>
    </div>
  </div>
</body>

</html>